<template>
  <view class="container">
    <!-- 标题 -->
    <view class="header">
      <text class="title">添加充电宝</text>
    </view>
    <!-- 表单区域，使用form标签包裹 -->
    <form>
      <view class="form-section">
        <!-- 设备id -->
        <view class="form-item">
          <text class="label">设备ID：</text>
          <input v-model="formData.deviceId" disabled class="input" placeholder="请输入设备ID" />
        </view>
		<!-- 设备id -->
		<!-- <view class="form-item">
		  <text class="label">用户ID：</text>
		  <input disabled v-model="formData.uid" class="input" placeholder="请输入设备ID" />
		</view> -->
		
        <!-- 设备名称 -->
        <view class="form-item">
          <text class="label">设备名称：</text>
          <input v-model="formData.devicename" disabled class="input" placeholder="请输入设备名称" />
        </view>
		<!-- 电池健康 -->
	<!-- 	<view class="form-item">
		  <text class="label">电池健康：</text>
		  <input
		    v-model="formData.electric"
		    class="input"
		    placeholder="请输入健康百分比"
		    type="number"
		    max="100"
		    min="0"
		  />
		</view> -->

        <!-- 电量 -->
  <!--      <view class="form-item">
          <text class="label">电量：</text>
          <input
            v-model="formData.cell"
            class="input"
            placeholder="请输入健康电量"
            type="number"
            max="100"
            min="0"
          />
        </view> -->
		
		<!-- 温度 -->
	<!-- 	<view class="form-item">
		  <text class="label">温度：</text>
		  <input
		    v-model="formData.temperature"
		    class="input"
		    placeholder="请输入温度"
		    type="number"
		    max="100"
		    min="0"
		  />
		</view> -->
		
		<!-- 湿度 -->
	<!-- 	<view class="form-item">
		  <text class="label">湿度：</text>
		  <input
		    v-model="formData.humidity"
		    class="input"
		    placeholder="请输入湿度"
		    type="number"
		    max="100"
		    min="0"
		  />
		</view> -->
      </view>
      <!-- 操作按钮 -->
      <view class="action-buttons">

        <button class="btn confirm-btn" type="submit" @click="addDeviceList">添加</button>
      </view>
    </form>
  </view>
</template>

<script setup>
import { ref,reactive } from 'vue';
import {onShow, onLoad} from "@dcloudio/uni-app";
import {getAddDevice, postBind } from '@/api/common.js'

const formData = ref({
  deviceId: '', // 设备编号
  uid: uni.getStorageSync("userInfo")?.id, // 用户id
  cell: '', // 电量
  electric: '', //电池健康
  temperature: '', // 温度
  humidity: '', // 湿度
  devicename: '' // 设备名称
});

onLoad((options) => {
	// console.log("options", JSON.parse(options.data))
	formData.value.deviceId = JSON.parse(options.data)?.id;
	formData.value.devicename = JSON.parse(options.data)?.name;
})
// 添加设备
const addDeviceList = () => {
	console.log("formData", formData.value);
	// return;
	postBind(formData.value).then(res => {
		console.log("res", res)
		if (res.code == 200) {
			uni.showToast({
				title:'设备添加成功！',
				icon:'success'
			})
			formData.value = {uid:uni.getStorageSync('userInfo').id};
			uni.navigateBack({ delta:2 })
		}
	})
}

</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  // min-height: 100vh;
  background-color: #ffffff;
}

.header {
  margin-bottom: 40rpx;
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
  }
}

.form-section {
  margin-bottom: 40rpx;
  .form-item {
    margin-bottom: 30rpx;
    .label {
      font-size: 32rpx;
      color: #666;
      margin-bottom: 15rpx;
      display: block;
    }
    .input {
      height: 80rpx;
      border: 1rpx solid #eee;
      border-radius: 12rpx;
      padding: 0 20rpx;
      font-size: 30rpx;
    }
  }
}

.feature-section {
  .section-title {
    font-size: 34rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 25rpx;
    display: block;
  }
  .feature-list {
    .feature-item {
      display: block;
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 20rpx;
      padding-left: 20rpx;
      position: relative;
      
      &::before {
        content: "•";
        position: absolute;
        left: 0;
        color: #2197ef;
        margin-right: 10rpx;
      }
    }
  }
}

.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx 30rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  
  .btn {
    flex: 1;
    height: 90rpx;
    border-radius: 12rpx;
    font-size: 32rpx;
    
    
    &.confirm-btn {
      background: #2197ef;
      color: #fff;
    }
  }
}
.form-item {
  .feature-textarea {
    width: 100%;
    min-height: 300rpx;
    border: 1rpx solid #eee;
    border-radius: 12rpx;
    padding: 20rpx;
    font-size: 28rpx;
    line-height: 1.6;
    color: #666;
    
    // 输入提示样式
    &::placeholder {
      color: #999;
      font-size: 26rpx;
    }
    
    // 聚焦状态
    &:focus {
      border-color: #2197ef;
      background-color: #f8faff;
    }
  }
}

.action-buttons {
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
</style>